<template>
  <div>
    <remote-css href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"></remote-css>

    <el-card shadow="none" style="border:0px;">
      <el-card>
        <el-row>
          <el-col :span="3">
            <el-avatar :size="64" :src="avatar">
            </el-avatar>
          </el-col>
          <el-col :span="21">
            <el-form label-position="left" :model="commentForm" ref="commentForm" label-width="80px">
              <div class="form-group comment-textarea mb-3">
                <span style="font-size: 1.175rem;color:#11181f;">评论内容</span>
                <textarea style="resize:none;margin-top: 24px;font-size: 1.1rem;font-weight: normal;" id="comment" name="comment"
                  v-model="commentForm.content" class="form-control form-control-sm" rows="3"></textarea>
                <el-button style="float: right;margin-top: 24px;width: 150px;" @click="postComment('commentForm')" type="danger">发布评论
                </el-button>
              </div>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {
    'remote-css': {
      render (createElement) {
        return createElement('link', { attrs: { rel: 'stylesheet', href: this.href } });
      },
      props: {
        href: { type: String, required: true },
      },
    },
    'remote-js': {
      render (createElement) {
        return createElement('script', { attrs: { type: 'text/javascript', src: this.src } });
      },
      props: {
        src: { type: String, required: true },
      },
    },
  },
  data () {
    return {
      commentForm: {
        content: '', // 评论内容
        userName: "", // 用户名
        userId: "", // 用户ID
        postId: "" // 文章ID
      },
      avatar: ""
    };
  },
  methods: {
    postComment (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          console.log(this.commentForm)
          if (this.commentForm.content == "" || this.commentForm.content.length < 5) {
            this.$message.error("至少需要评论5个字符", { duration: 3 * 1000 })
            return;
          }
          this.$axios.post('/comment/post', this.commentForm, {
            headers: {
              "Authorization": localStorage.getItem("token")
            }
          }).then(res => {
            console.log(res.data.data);
            if (res.data.code == 200) {
              this.$message.success(res.data.msg, { duration: 3 * 1000 })
              location.reload();
            } else {
              this.$message.error(res.data.msg, { duration: 3 * 1000 })
            }
          })

        } else {
          console.log('error submit!!');
          // this.$store.commit("REMOVE_INFO");
          return false;
        }
      });
    }
  },
  created () {
    this.avatar = this.$store.getters.getUser.avatar;
    this.commentForm.userName = this.$store.getters.getUser.username;
    this.commentForm.userId = this.$store.getters.getUser.id;
    this.commentForm.postId = this.$route.params.blogId;
  }
}
</script>

<style scoped>
.el-form-item__label {
  font-size: 1.375rem !important;
}
.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}
.form-control {
  border: 1px solid #e8f0fe;
  background-color: #e8f0fe;
  color: #8c8e94;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.form-control {
  border-radius: 5px;
}
.form-control textarea {
  height: auto;
}
textarea:focus {
  background: #e8f0fe;
}
</style>